<template>
	<view class="bg min100 pt-1">
		<!-- 商品 -->
		<view class="bg-white pb-30" v-if="info.images.length">
			<!-- <view class="flex_l plr-36">
				<image :src="info.images[0]" class="radius-10" style="width: 200rpx; height: 200rpx;" mode="" v-if="info.images[0]"></image>
			</view> -->
			<u-swiper :list="info.images" height="400" @click="previewImage"></u-swiper>
		</view>
		<!-- 地址 -->
		<view class="bg-white mt-20 ptb-30 plr-36">
			<view class="size-34 bold">联系地址</view>
			<view class="mt-20 flex ">
				<view class="flex_l" @click="goMap(info.lat, info.lng)">
					<view class="img-map">
						<image src="../../static/icon-map.png" mode=""></image>
					</view>
					<view class="u-line-2 size-26 ml-10">
						<text class="type"
							v-if="info.address_type">{{typeText[info.address_type] ? typeText[info.address_type] : '其他'}}</text>
						<text>{{info.address}}</text>
					</view>
				</view>
				<view class="ml-40" @click="goPhone(info.mobile)" v-if="type && info.status != 2">
					<view class="img-phone">
						<image src="../../static/icon-phone.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 用户备注 -->
		<view class="bg-white mt-20 ptb-30 plr-36" v-if="info.remarks">
			<view class="size-34 bold">用户备注</view>
			<view class="mt-16">{{info.remarks}}</view>
		</view>
		<!-- 订单 -->
		<view class="bg-white mt-20 ptb-30 plr-36">
			<view class="size-34 bold">订单信息</view>
			<view class="mt-16">订单编号：{{info.order_no}}</view>
			<view class="mt-16">下单时间：{{info.createtime_text}}</view>
			<view class="mt-16">预约时间：{{info.scheduledtime_text}}</view>
			<view class="mt-16" v-if="info.accepttime">接单时间：{{info.accepttime_text}}</view>
			<view class="mt-16" v-if="info.successtime">结算时间：{{info.successtime_text}}</view>
			<view class="mt-16">联系人：{{info.username}}</view>
			<view class="mt-16">联系电话：{{info.mobile}}</view>
			<view class="mt-16">预估重量：{{info.weight_type_text}}</view>
			<view class="mt-16" v-if="info.total_money !== '0.00'">订单总金额：￥{{info.total_money}}</view>
			<view class="mt-16" v-if="info.total_integral !== '0.00'">订单总积分：{{info.total_integral}}</view>
		</view>
		<!-- 订单详情 -->
		<view class="bg-white mt-20 ptb-30 plr-36" v-if="info.details.length">
			<view class="size-34 bold">订单详情</view>
			<view class="mt-16" v-for="(item, index) in info.details">
				{{item.title}}：￥{{item.price}} × {{item.number}}{{item.unit}} = ￥{{item.total_price}}
			</view>
		</view>
		<!-- 电话 -->
		<view class="bg-white flex mt-20 ptb-30 plr-36" v-if="info.recycler_id">
			<view class="flex_l" @click="goPhone(info.recycler_mobile)">
				<image src="../../static/icon-phone.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
				<view class="ml-20">
					<view class="bold">回收员电话</view>
					<view class="mt-15">{{info.recycler_name}}</view>
				</view>
			</view>
		</view>
		<!-- 操作 -->
		<!-- <view class="bg-white mt-20 ptb-30 plr-36">
			<view class="flex plr-36 mt-25">
				<view @click="toPay" class="bg-yellow u-flex-1 center white radius-10 mr-30 ptb-20">去付款</view>
				<view @click="toCancel" class="border-yellow u-flex-1 center yellow radius-10 mr-20 ptb-20" v-if="!type && info.status === 0">取消订单</view>
				<view @click="toCancel" class="border-yellow u-flex-1 center yellow radius-10 mr-20 ptb-20" v-if="!type && info.status === 0">取消订单</view>
				<view @click="toSettlement(info.id)" class="bg-yellow u-flex-1 center white radius-10 mr-30 ptb-20" v-if="type && info.status === 1">前去结算</view>
			</view>
		</view> -->
		<view class="bg-white mt-20 ptb-30 plr-36" v-if="type">
			<u-button type="warning" ripple :loading="loading" @click="ordertaking(info.id)"
				v-if="info.status == 0">立即接单</u-button>
			<u-button type="success" ripple :loading="loading" @click="toSettlement(info.id)"
				v-if="info.status == 1">前去结算</u-button>

			<u-button type="success" ripple :loading="loading" @click="printorder(info)"
				v-if="info.status == 2">打印票据</u-button>
		</view>
		<view class="bg-white mt-20 ptb-30 plr-36" v-else>
			<u-button type="default" ripple :loading="loading" @click="toCancel" v-if="info.status == 0">取消订单</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	var pos = require('./../utils/pos.js')
	export default {
		data() {
			return {
				loading: false,
				typeText: {
					'1': '住宅',
					'2': '商铺',
					'3': '写字楼',
					'4': '工厂'
				},
				order_id: '',
				// 0普通用户,1回收员
				type: 0,
				info: {},
				cando: true
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(option) {
			this.order_id = option.order_id;
			this.type = option.recycler ? 1 : 0;
		},
		onShow() {
			this.init()
		},
		methods: {
			printorder(info) {
				if (!this.$bluetooth.check_donnect_status()) {
					return uni.navigateTo({
						url: '/pages/order/bluetooth',
						fail(res) {
							console.log(res)
						}
					})
				}
				if (!this.cando) {
					return
				}
				uni.showToast({
					title: '正在打印',
					duration: 3000,
				})
				var _this = this
				_this.cando = false
				pos.AddPrintQueue('InitPos'); // 初始化蓝牙打印机 [27,64]
				pos.PrintTitle(" 废为宝回收凭证"); //打印标题  
				pos.PrintNameValue('订单编号: ', info.order_no);
				pos.PrintText("回收员: " + this.userInfo.nickname + ' (' + this.userInfo.id + ')  ' + this.userInfo
					.mobile); //打印标题  
				pos.PrintMiddleText('--------------------------------------');
				pos.PrintNameValue('联系人: ', info.username);
				pos.PrintNameValue('联系电话: ', info.mobile);
				pos.PrintNameValue('联系地址: ', info.address + info.address + info.address);
				pos.PrintNameValue('预估重量: ', info.weight_type_text);
				pos.PrintNameValue('下单时间: ', info.createtime_text);
				pos.PrintNameValue('预约时间: ', info.scheduledtime_text);
				pos.PrintNameValue('接单时间: ', info.accepttime_text);
				pos.PrintMiddleText('--------------------------------------');
				pos.PrintText("品名    单价       数量         小计");
				for (let key in info.details) {
					var item = info.details[key]
					pos.PrintText(item.title);
					pos.PPP(item.price, item.number + item.unit, item.total_price);
				}
				pos.PrintMiddleText('--------------------------------------');
				pos.PrintNameValue('订单总金额: ¥', info.total_money);
				pos.PrintNameValue('订单总积分: ', info.total_integral);
				pos.PrintNameValue('结算时间: ', info.successtime_text);
				pos.PrintMiddleText('--------------------------------');
				pos.PrintText("谢谢您的信任,期待我们的下次相遇!"); //打印标题
				pos.PrintJumpLines(3);
				setTimeout(function() {
					_this.cando = true
				}, 300)
			},
			previewImage(res) {
				uni.previewImage({
					urls: this.info.images
				})
			},
			init() {
				let url = this.type ? '/api/order/recyclerdetail' : '/api/order/detail';
				this.$http(url, {
					id: this.order_id
				}).then(data => {
					this.info = data;
				})
			},
			toPay() {
				uni.navigateTo({
					url: '/pages/home/pay?order_id=' + this.order_id
				})
			},
			ordertaking(id) {
				this.loading = true;
				this.$http('/api/order/ordertaking', {
					id: id
				}, "POST").then(data => {
					uni.showToast({
						title: '接单成功',
						icon: 'success',
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/order/recycler-list'
						})
					}, 1000);
				}).finally(() => {
					this.loading = false;
				});
			},
			toCancel() {
				uni.showModal({
					title: '订单取消',
					content: '确认取消订单？',
					success: (res) => {
						if (res.confirm) {
							this.loading = true;
							this.$http('/api/order/cancel', {
								id: this.order_id
							}).then(() => {
								uni.showToast({
									title: '取消成功',
									icon: 'none',
									duration: 2000
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 2500);
							}).finally(() => {
								this.loading = false;
							});
						}
					}
				})
			},
			toRefund() {
				uni.navigateTo({
					url: '/pages/order/apply-refund?order_id=' + this.order_id
				})
			},
			toDetail() {
				uni.navigateTo({
					url: '/pages/order/refund-detail?order_id=' + this.order_id
				})
			},
			toEval() {
				uni.navigateTo({
					url: '/pages/order/evaluate?order_id=' + this.order_id
				})
			},
			toSettlement(id) {
				uni.navigateTo({
					url: '/pages/order/settlement?id=' + id
				})
			},
			goPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
			goMap(lat, lng) {
				uni.openLocation({
					latitude: typeof lat === 'string' ? parseFloat(lat) : lat,
					longitude: typeof lng === 'string' ? parseFloat(lng) : lng
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.type {
		margin-right: 5px;
		font-size: 10px;
		padding: 2px 5px;
		color: #F5CC89;
		border: 1px solid #F5CC89;
		border-radius: 4px;
	}

	.img-map {
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.img-phone {
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	/deep/.u-warning-hover {
		background-color: $yellow !important;
	}

	/deep/.u-radio {
		display: flex;
		flex-direction: row-reverse;
	}

	/deep/.u-radio-group {
		width: 100% !important;
	}

	/deep/.u-radio__label {
		width: 100%;
	}
</style>